//用render函数实现菜单组件
import elMenu from "../menu/el-menu.vue";
import elMenuItem from "../menu/el-menu-item.vue";
import elSubmenu from "../menu/el-submenu.vue";

export default {
    props:{
        data:{
            type:Array,
            default:()=>[]
        }
    },
    render(){//render类似react语法
        //传入数据
        let renderChildren = (data) => {
            return data.map(child=>{
                //三元判断 + 递归
                return child.children ? <elSubmenu>
                    <div slot='title'>{child.title}</div>
                    {renderChildren(child.children)}
                </elSubmenu> : 
                <elMenuItem nativeOnClick={()=>{alert(1)}}>{child.title}</elMenuItem>
                // 用native绑定原生事件
            })
        }
        return <elMenu>
            {renderChildren(this.data)}
        </elMenu>
    }
}